<template>
  <div>
    <el-table row-key="proid" :data="list" style="width: 100%">
      <el-table-column prop="proname" label="商品名称" width="180" />
      <el-table-column label="是否推荐" width="180">
        <template #default="{ row }">
          <el-switch
            :model-value="!!row.isrecommend"
            @change="handleSwitchChange(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="count"
      v-model:page-size="limitNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import ProApiService from "@/api/pro.js";
export default {
  name: "AppProList",
  data() {
    return {
      list: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
      count: 1,
      limitNum: 10,
      total: -1,
    };
  },
  watch: {
    // 当参数发生变化的时候,重新调取接口
    params() {
      this.getProList();
    },
  },
  computed: {
    params() {
      return {
        count: this.count,
        limitNum: this.limitNum,
      };
    },
  },
  mounted() {
    this.getProList();
  },
  methods: {
    async getProList() {
      try {
        const res = await ProApiService.getProListApi(this.params);
        console.log(res, "--res");
        this.list = res.data;
        this.total = res.total;
      } catch (error) {
        console.log(error, "---ee");
      }
    },
    // 更改推荐
    async handleSwitchChange(row) {
      try {
        await ProApiService.postProItemUpdateApi({
          proid: row.id,
          type: "isrecommend",
          flag: row.isrecommend ? 0 : 1,
        });
        this.getProList();
      } catch (error) {
        console.log(error, "---");
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
